<template>
  <!-- 学生、家长暂时不显示搜索条件 -->
  <van-row
    v-if="curRoleCode !== 'student' || curRoleCode !== 'parent'"
    class="condition"
  >
    <div v-if="gradeVisible" class="grade" @click.stop="gradeShowPopup = true">
      <span>{{ gradeLabel }}</span>
      <img :src="triangleSrc" />
    </div>

    <div v-if="sexVisible" class="grade" @click.stop="sexShowPopup = true">
      <span>{{ sexLabel }}</span>
      <img :src="triangleSrc" />
    </div>

    <div
      v-if="warningTypeVisible"
      class="grade"
      @click.stop="warningTypeShowPopup = true"
    >
      <span>{{ warningTypeLabel }}</span>
      <img :src="triangleSrc" />
    </div>

    <div class="other-cond">
      <div class="el-input">
        <input
          v-model="conditions.name"
          type="text"
          autocomplete="off"
          placeholder="输入班级、姓名、项目名称搜索..."
          class="el-input__inner"
          @input="nameInput"
        />
      </div>
      <div class="search" @click="searchData">
        <van-icon name="search" size="30" class="icon" />
      </div>
    </div>
    <!-- 年级下拉弹窗 -->
    <!-- <van-popup v-model:show="showPopup" round position="bottom">
      <van-cascader
        v-model="conditions.gradeNo"
        :options="allGradeInfo"
        :field-names="{ text: 'gradeName', value: 'gradeNo' }"
        @close="showPopup = false"
        @change="cascaderChange"
      >
        <template #title>
          <span style="position: relative; top: 5px">请选择年级</span>
          <van-button
            class="cascader-btn"
            type="primary"
            size="mini"
            @click.stop="clearGrade"
          >
            删除已选值</van-button
          >
        </template>
      </van-cascader>
    </van-popup> -->
    <GradePicker
      v-model:gradeName="conditions.gradeName"
      v-model:gradeNo="conditions.gradeNo"
      v-model:show="gradeShowPopup"
    ></GradePicker>

    <SexPicker
      v-model="conditions.sex"
      v-model:sexName="sexName"
      v-model:show="sexShowPopup"
    ></SexPicker>

    <WarningTypePicker
      v-model="conditions.warningType"
      v-model:warnningTypeName="warnningTypeName"
      v-model:show="warningTypeShowPopup"
    ></WarningTypePicker>
  </van-row>
</template>
<script lang="ts" setup>
import { getRoleCode } from '/@/util/business-util'
import { ref, reactive, watch, computed, ComputedRef } from 'vue'
import triangleSrc from '/@/assets/image/common/triangle-2x.png'
import GradePicker from '../components/GradePicker.vue'
import { User } from '/@/types/User'
import { Condition, ConditionKey, Grade, Sex, SexName } from '../types'
import { useRoute } from 'vue-router'
import SexPicker from '../components/SexPicker.vue'
import WarningTypePicker from '../components/WarningTypePicker.vue'

const props =
  defineProps<{ flagKey: string; userInfo: User; allGradeInfo: Grade[] }>()

const emits = defineEmits(['searchData'])

const conditions = reactive<Condition>({
  gradeNo: '', // 年级No
  gradeName: '', // 年级名称
  name: '', // 班级或姓名
  sex: '', // 性别
})

const curRoleCode = getRoleCode(props.userInfo) // 根据用户信息获取roleCode
// 搜索
function searchData() {
  emits('searchData', props.flagKey, conditions)
}

function nameInput(event: any) {
  // 去掉前后空格
  conditions.name = conditions.name.trim()
}

const queryMap: { [key in ConditionKey]?: { defaultLabel: string } } = {
  gradeName: { defaultLabel: '年级选择' },
  sex: { defaultLabel: '性别选择' },
  warningType: { defaultLabel: '预警类型选择' },
}

const queryField = computed<ConditionKey>(
  () => (useRoute().query.queryField as any) || 'gradeName'
)

const {
  showPopup: gradeShowPopup,
  visible: gradeVisible,
  label: gradeLabel,
} = useQueryGrade({
  searchData,
  conditions,
  queryField,
  conditionKey: 'gradeName',
})

const {
  showPopup: sexShowPopup,
  visible: sexVisible,
  label: sexLabel,
  sexName,
} = useQuerySex({
  searchData,
  queryField,
  conditionKey: 'sex',
})

const {
  showPopup: warningTypeShowPopup,
  visible: warningTypeVisible,
  label: warningTypeLabel,
  warnningTypeName,
} = useQueryWarningType({
  searchData,
  queryField,
  conditionKey: 'warningType',
})

function useQueryGrade({
  searchData,
  conditions,
  queryField,
  conditionKey,
}: {
  searchData: () => void
  conditions: Condition
  queryField: ComputedRef<ConditionKey>
  conditionKey: ConditionKey
}) {
  const queryObj = queryMap[conditionKey]

  return {
    showPopup: useShowPopup(searchData),
    visible: useVisible({ queryField, conditionKey }),
    label: computed(() => conditions[conditionKey] || queryObj?.defaultLabel),
  }
}

function useQuerySex({
  searchData,
  queryField,
  conditionKey,
}: {
  searchData: () => void
  queryField: ComputedRef<ConditionKey>
  conditionKey: ConditionKey
}) {
  const queryObj = queryMap[conditionKey]
  const sexName = ref<SexName>()

  return {
    sexName,
    showPopup: useShowPopup(searchData),
    visible: useVisible({ queryField, conditionKey }),
    label: computed(() => sexName.value || queryObj?.defaultLabel),
  }
}

function useQueryWarningType({
  searchData,
  queryField,
  conditionKey,
}: {
  searchData: () => void
  queryField: ComputedRef<ConditionKey>
  conditionKey: ConditionKey
}) {
  const queryObj = queryMap[conditionKey]
  const warnningTypeName = ref('')

  return {
    warnningTypeName,
    showPopup: useShowPopup(searchData),
    visible: useVisible({ queryField, conditionKey }),
    label: computed(() => warnningTypeName.value || queryObj?.defaultLabel),
  }
}

function useShowPopup(searchData: () => void) {
  const showPopup = ref(false)

  watch(showPopup, (showPopup) => {
    if (showPopup) return

    searchData()
  })
  return showPopup
}

function useVisible({
  queryField,
  conditionKey,
}: {
  queryField: ComputedRef<ConditionKey>
  conditionKey: ConditionKey
}) {
  return computed(() => queryField.value === conditionKey)
}
</script>

<style lang="less" scoped>
@import '/@/styles/index.less';

.condition {
  background-color: #fff;
  padding: 10px 20px;
  margin-bottom: 5px;
  font-size: 14px;
  box-sizing: content-box;
  height: 30px;
  line-height: 30px;
  .grade {
    color: #666;
    margin-right: 10px;
    img {
      width: 15px;
      margin-left: 4px;
      zoom: 0.7;
    }
  }
  .other-cond {
    flex: 1;
    display: flex;
    // justify-content: column;
    .el-input {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 100%;
      .el-input__inner {
        border-radius: 20px;
        -webkit-appearance: none;
        // background-color: #fff;
        // background-image: none;
        border-radius: 20px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: 12px;
        line-height: 1;
        outline: none;
        padding: 0 15px;
        // transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        height: 26px;
        width: 100%;
      }
      input::-webkit-input-placeholder {
        color: #c8c9cc;
        // font-size: 12px;
      }
    }
    .search {
      margin-left: 5px;
      .icon {
        color: @theme-color;
        position: relative;
        top: 50%; /*偏移*/
        transform: translateY(-50%);
      }
    }
  }
}
</style>
